<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的技术博客 - 分享技术见解与研究</title>
    <meta
      name="description"
      content="个人技术博客平台，专注于分享JSON处理库对比分析、AI编程工具评估、上下文窗口优化研究等技术深度文章。提供stream-json vs large-json-reader-writer性能测试、Claude Code与Spec-kit集成问题分析等研究报告，为开发者提供技术选型和架构设计参考。"
    />
    <link rel="icon" href="vite.svg" />
    <link rel="stylesheet" href="./src/style.css" />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <style>
      /* 自定义滚动条样式 */
      ::-webkit-scrollbar {
        width: 8px;
      }
      ::-webkit-scrollbar-track {
        background: #f1f1f1;
      }
      ::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #555;
      }
      /* 平滑滚动 */
      html {
        scroll-behavior: smooth;
      }
      /* 文章卡片悬停效果 */
      .article-card {
        transition: all 0.3s ease;
      }
      .article-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-lg sticky top-0 z-50">
      <div class="container mx-auto px-4">
        <div class="flex justify-between items-center py-4">
          <!-- Logo -->
          <div class="flex items-center space-x-2">
            <i class="fas fa-blog text-2xl text-blue-600"></i>
            <span class="text-xl font-bold text-gray-800">技术博客</span>
          </div>

          <!-- 导航菜单 -->
          <div class="hidden md:flex items-center space-x-6">
            <a
              href="#home"
              class="nav-link text-gray-700 hover:text-blue-600 transition"
              >首页</a
            >
            <a
              href="#articles"
              class="nav-link text-gray-700 hover:text-blue-600 transition"
              >文章</a
            >
            <a
              href="#about"
              class="nav-link text-gray-700 hover:text-blue-600 transition"
              >关于</a
            >
            <!-- <a
              href="#contact"
              class="nav-link text-gray-700 hover:text-blue-600 transition"
              >联系</a
            > -->
          </div>

          <!-- 搜索框 -->
          <div class="hidden md:flex items-center">
            <div class="relative">
              <input
                type="text"
                id="searchInput"
                placeholder="搜索文章..."
                class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
            </div>
          </div>

          <!-- 移动端菜单按钮 -->
          <button id="mobileMenuBtn" class="md:hidden">
            <i class="fas fa-bars text-2xl text-gray-700"></i>
          </button>
        </div>

        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="hidden md:hidden pb-4">
          <a href="#home" class="block py-2 text-gray-700 hover:text-blue-600"
            >首页</a
          >
          <a
            href="#articles"
            class="block py-2 text-gray-700 hover:text-blue-600"
            >文章</a
          >
          <a href="#about" class="block py-2 text-gray-700 hover:text-blue-600"
            >关于</a
          >
          <!-- <a
            href="#contact"
            class="block py-2 text-gray-700 hover:text-blue-600"
            >联系</a
          > -->
        </div>
      </div>
    </nav>

    <!-- Hero 区域 -->
    <header
      id="home"
      class="bg-gradient-to-r from-blue-600 to-purple-600 text-white"
    >
      <div class="container mx-auto px-4 py-20 text-center">
        <h1 class="text-4xl md:text-6xl font-bold mb-4">
          欢迎来到我的技术博客
        </h1>
        <p class="text-xl md:text-2xl mb-8 opacity-90">
          分享技术见解，探讨前沿研究，记录学习心得
        </p>
        <div class="flex justify-center space-x-4">
          <button
            class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition"
          >
            <i class="fas fa-book-open mr-2"></i>开始阅读
          </button>
          <button
            class="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition"
          >
            <i class="fas fa-rss mr-2"></i>订阅更新
          </button>
        </div>
      </div>
    </header>

    <!-- 文章列表区域 -->
    <main id="articles" class="container mx-auto px-4 py-12">
      <section>
        <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
          最新文章
        </h2>

        <!-- 文章统计信息 -->
        <div class="mb-8 text-center">
          <p class="text-gray-600">
            共
            <span id="articleCount" class="font-bold text-blue-600">0</span>
            篇文章
          </p>
        </div>

        <!-- 文章卡片容器 -->
        <div
          id="articleGrid"
          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
        >
          <!-- 文章卡片将通过 JavaScript 动态生成 -->
        </div>
      </section>

      <!-- 分类筛选 -->
      <section class="mt-12">
        <h3 class="text-2xl font-bold text-gray-800 mb-6">按分类浏览</h3>
        <div id="categories" class="flex flex-wrap gap-3">
          <!-- 分类标签将通过 JavaScript 动态生成 -->
        </div>
      </section>
    </main>

    <!-- 关于我部分 -->
    <section id="about" class="bg-gray-100 py-16">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
          <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
            关于我
          </h2>
          <div class="bg-white rounded-lg shadow-lg p-8">
            <div class="flex items-center justify-center mb-6">
              <img
                src="https://picsum.photos/seed/avatar/150/150.jpg"
                alt="头像"
                class="w-32 h-32 rounded-full"
              />
            </div>
            <p class="text-gray-700 text-center mb-6">
              我是一名热爱技术的开发者，专注于前端开发、数据分析和人工智能研究。
              在这个博客中，我分享我的学习经验、技术见解和研究心得。
            </p>
            <div class="flex justify-center space-x-4">
              <a href="#" class="text-gray-600 hover:text-blue-600">
                <i class="fab fa-github text-2xl"></i>
              </a>
              <a href="#" class="text-gray-600 hover:text-blue-600">
                <i class="fab fa-twitter text-2xl"></i>
              </a>
              <a href="#" class="text-gray-600 hover:text-blue-600">
                <i class="fab fa-linkedin text-2xl"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系表单 -->
    <!--    <section id="contact" class="py-16">
      <div class="container mx-auto px-4">
        <div class="max-w-2xl mx-auto">
          <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
            联系我
          </h2>
          <form id="contactForm" class="bg-white rounded-lg shadow-lg p-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
              <div>
                <label class="block text-gray-700 font-semibold mb-2"
                  >姓名</label
                >
                <input
                  type="text"
                  id="name"
                  required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
              <div>
                <label class="block text-gray-700 font-semibold mb-2"
                  >邮箱</label
                >
                <input
                  type="email"
                  id="email"
                  required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
            </div>
            <div class="mb-6">
              <label class="block text-gray-700 font-semibold mb-2">主题</label>
              <input
                type="text"
                id="subject"
                required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div class="mb-6">
              <label class="block text-gray-700 font-semibold mb-2">消息</label>
              <textarea
                id="message"
                rows="4"
                required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              ></textarea>
            </div>
            <button
              type="submit"
              class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition"
            >
              <i class="fas fa-paper-plane mr-2"></i>发送消息
            </button>
          </form>
        </div>
      </div>
    </section> -->

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
          <div class="mb-4 md:mb-0">
            <p>&copy; 2024 我的技术博客. 保留所有权利.</p>
          </div>
          <div class="flex space-x-4">
            <a href="#" class="hover:text-blue-400 transition">
              <i class="fab fa-github"></i>
            </a>
            <a href="#" class="hover:text-blue-400 transition">
              <i class="fab fa-twitter"></i>
            </a>
            <a href="#" class="hover:text-blue-400 transition">
              <i class="fab fa-linkedin"></i>
            </a>
          </div>
        </div>
      </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button
      id="backToTop"
      class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg hover:bg-blue-700 transition hidden"
    >
      <i class="fas fa-arrow-up"></i>
    </button>

    <!-- 加载 JavaScript 文件 -->
    <script src="src/index.js" defer type="module"></script>
  </body>
</html>
